<template>
    <div>
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="姓名" label-width="90px" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学号" label-width="90px" prop="number">
                <el-input v-model="form.number" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属班级" prop="classId" style="margin-left: 15px;">
                <el-select v-model="form.classId" placeholder="请选择班级">
                    <el-option v-for="item in list" :label="item.name" :value="item.id" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="密码" label-width="90px" prop="password">
                <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" label-width="90px" prop="emalil">
                <el-input v-model="form.emalil" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生日" label-width="90px" prop="birthday">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday"
                    style="width: 40%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="性别" label-width="90px" prop="sex">
                <el-radio-group v-model="form.sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item style="display: flex; justify-content: flex-end">
                <el-button type="primary" @click="submit">确定</el-button>
                <el-button @click="qx">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { classnames } from '@/api/student'
import { studentadd } from '@/api/student'
export default {
    data() {
        return {
            form: {
                id: -1,
                name: '',
                classId: "",
                password: "",
                number: "",
                sex: 1,
                birthday: "",
                emalil: "",


            },
            list: [],
            rules: {
                number: [
                    {
                        required: true,
                        message: '请输入学号(12位)',
                        trigger: 'blur',
                        min: 12,
                        max: 12
                    }
                ],
                classId: [
                    {
                        required: true,
                        message: '请选择班级',
                        trigger: 'blur'
                    }
                ],
                name: [
                    {
                        required: true,
                        message: '请输入教师名称',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }
                ],
                emalil: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                birthday: [

                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }

                ],
                sex: [
                    {
                        required: true,
                        message: '请选择生日',
                        trigger: 'blur'
                    }
                ],


            }
        }
    },
    methods: {
        submit() {
            //   触发表单验证
            this.$refs['form'].validate(falg => {
                if (falg) {
                    studentadd(this.form).then(res => {
                        console.log(res);
                        if (res.code === 0) {
                          this.$message({
                            type: 'success',
                            message: '添加成功'
                          })
                          // 通知父级关闭对话框
                          this.$emit('close')
                        }
                    })
                }
            })

        },
        getlist() {
            classnames().then(res => {
                this.list = res.data
            })
        },
        qx() {
            // 通知父级关闭对话框
            this.$emit('close')
        }

    },
    mounted() {
        this.getlist()
    }
}
</script>

<style lang="sass" scoped></style>
